<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<input type="hidden" th:value="${cameraInfo.cameraName}" id="cameraName" name="cameraName"/>
				<input type="hidden" th:value="${cameraInfo.rtmpUrl}" id="rtmpUrl" name="rtmpUrl"/>
				<input type="hidden" th:value="${cameraInfo.communityId}" id="communityId" name="communityId"/>
				<input type="hidden" th:value="${cameraInfo.communityName}" id="communityName" name="communityName"/>
				<div id="vedioDiv" style="width: 740px; height: 402px; margin-left: auto;margin-right: auto">
					<script src="../../js/plugins/Sewise-Player/sewise.player.min.js"></script>
					<script src="../../js/jquery.min.js?v=2.1.4"></script>
					<script type="text/javascript">
						var name = $("#cameraName").val();
                        var direction = $("#direction").val();
                        var rtmpUrl = $("#rtmpUrl").val();
                        var enter = "出口";
                        var communityName = $("#communityName").val()
                        if(direction == 1){
                            enter = "入口";
						}
                        SewisePlayer.setup({
                            server: "live",
                            type: "rtmp",
                            streamurl: rtmpUrl,
                            autostart: "true",
                            buffer: "5",
                            logo:"#",
                            timedisplay:"disable",
                            customdatas:{ "logoLink": "javascript:;" },
                            title: communityName + "-"+name + "-"+enter,
                            lang: "zh_CN",
                            claritybutton: "disable",   //是否自动影藏导航栏
                            draggable: false,
                            autostart:true,
                            skin: "liveWhite",
                        });
                        function playPause() {
                            console.log('playPause playPause ');
                            SewisePlayer.doPause();
                        }
					</script>
				</div>
			</div>
	    </div>
		<div class="row" style="padding-top:10px">
			<form class="form-horizontal m-t" id="signupForm">
				<input type="hidden" th:value="${cameraInfo.id}" id="id" name="id"/>
				<input type="hidden" th:value="${cameraInfo.communityId}" id="communityId" name="communityId"/>
				<input type="hidden" th:value="${cameraInfo.id}" id="id" name="id"/>
				<input type="hidden" th:value="${cameraInfo.direction}" id="direction" name="direction"/>
				<div class="col-sm-12">
					<div class="col-sm-6">
						<input  id="carNumber" name="carNumber"  style="width:100%"  class="form-control" type="text" placeholder="请输入车牌号">
					</div>
					<div class="col-sm-6">
						<button  type="submit"  class="btn btn-primary" style="width:100%">开闸</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<div th:include="include::footer"></div>
	<script type="text/javascript" src="/js/appjs/camera/vedio.js">
	</script>
</body>
</html>
